
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="demo">
			<input type="text" v-model="searchName"/>
			<ul>
				<li v-for="(p, index) in filterPersons" :key="index">
					{{index}}---{{p.name}}---{{p.age}}
				</li>
			</ul>
			<button @click="setOrderType(1)">年龄升序</button>
			<button @click="setOrderType(2)">年龄降序</button>
			<button @click="setOrderType(0)">原本顺序</button>
		</div>
		
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			// Vue本身只是监控了persons的改变, 没有监视数组内部数据的改变
			// Vue重写了数组中的一系列改变数据的方法(先调用原生, 更新界面) --->数组内部改变, 界面自动变化
			new Vue({
				el: "#demo",
				data: {
					searchName: "",
					orderType: 0, // 0代表原本, 1代表升序, 2代表降序
					persons:[
						{name: 'Tom', age: 19},
						{name: 'Jack', age: 21},
						{name: 'Bob', age: 20},
						{name: 'Rose', age: 17},
					]
				},
				computed: {
					filterPersons(){
						// 取出相关的数据
						const {searchName, persons, orderType} = this
						// 最终需要显示的数组
						let fPersons = persons.filter(p => p.name.indexOf(searchName) > -1)
						
						if(orderType !== 0){
							fPersons.sort(function(p1, p2){ // 如果返回负数p1在前, 返回正数p2在前
								// 1代表升序, 2代表降序
								if(orderType === 2){
									return p2.age - p1.age
								}else{
									return p1.age - p2.age
								}
							})
						}
						return fPersons
					}
				},
				methods: {
					setOrderType(orderType){
						this.orderType = orderType
					}
				}
			})
		</script>
	</body>
</html>

